<template>
    <div class="boxcard">
        <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>草莓棚</span>
        </div>
        <div class="text item">
          <el-button type="primary"><p class="btntext">室内温度</p><span>{{message[0] && message[0].OutdoorTemperature}}</span></el-button>
          <el-button type="primary" style="background-color:#1FCBB8"><p class="btntext">室内湿度</p><span>{{message[0] && message[0].OutdoorHumidity}}</span></el-button>
          <el-button type="info"><p class="btntext">室外温度</p><span>{{message[0] && message[0].indoorTemperature}}</span></el-button>
          <el-button type="info"><p class="btntext">室外湿度</p><span>{{message[0] && message[0].indoorHumidity}}</span></el-button>
          <el-button type="info"><p class="btntext">光照强度</p><span>{{message[0] && message[0].LightIntensity}}</span></el-button>
          <el-button type="info"><p class="btntext">氮</p><span>{{message[0] && message[0].nitrogen}}</span></el-button>
          <el-button type="info"><p class="btntext">CO2</p><span>{{message[0] && message[0].CO2}}</span></el-button>
          <el-button type="info"><p class="btntext">磷</p><span>{{message[0] && message[0].phosphorus}}</span></el-button>
          <el-button type="info"><p class="btntext">钾</p><span>{{message[0] && message[0].potassium}}</span></el-button>
          <el-button type="info"><p class="btntext">PH</p><span>{{message[0] && message[0].PH}}</span></el-button>
          <el-button type="info"><p class="btntext">EC</p><span>{{message[0] && message[0].EC}}</span></el-button>
          <el-button type="info"></el-button>
        </div>
        </el-card>
    </div>
</template>
<script>
import eventBus from "../../../utils/eventBus"
  export default {
    // props:['message'],
    data() {
      return {
        message:[],
      }
    },
    mounted(){
     eventBus.$on("message",(val)=>{
      //  console.log(val);
       this.message = val
     })
    },
    watch:{
     massage1(){
       console.log(this.massage1[0]);
     }
    }
  }
</script>
<style  lang="less" scoped>
  .boxcard{
    /deep/.el-card{
      width: 410px;
      height: 450px;
      margin-bottom: 15px;
      margin-left: 0;
      border-radius: 15px;
    }
    /deep/.el-card__header{
      background-color: #1FCBB8;
      text-align: center;
      color: #ffffff;
    }
    .text{
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: space-around;
      /deep/.btntext{
        margin-bottom: 8px;
      }
      /deep/.el-button--info{
        background-color: #F4F8FC;
        color: #748AA3;
      }
    }
    /deep/.el-card__body{
      height: 397px;
      padding: 10px;
    }
    /deep/.el-button{
      margin-left: 0;
      width: 120px;
      height: 70px;
      border: 0;
    }
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>